<template>
  <view>
    <l-form-cell v-model="form.brandModel" label="品牌型号" placeholder="请输入品牌型号" :must="must" :disabled="disabled" />
    <l-form-cell v-model="form.useType" label="使用性质" placeholder="请输入使用性质" :must="must" :disabled="disabled" />
    <l-form-cell v-model="form.frameNumber" :maxlength="17" label="车辆识别代码" placeholder="请输入车辆识别代码" :must="must" :disabled="disabled" />
    <l-form-cell v-model="form.engineNumber" label="发动机号" placeholder="请输入发动机号" :must="must" :disabled="disabled" />
    <l-form-cell label="燃油类型" :must="must" has-slot :arrow="!disabled" :unlined="!(status != 1 && status != 2)">
      <picker class="flex-item" mode="selector" :disabled="disabled" :value="fuelTypeValue" :range="fuelTypeList" range-key="label" @change="bindFuelTypeIndex">
        <view class="form-item flex-row justify-end align-center">
          <view class="text-30" :class="['color-t' + (fuelTypeValue || fuelTypeValue===0 || showType === 'detail' ? 1 : 3)]">{{ fuelTypeLabel || (showType === 'detail' ? '暂无' : '请选择燃油类型') }}</view>
        </view>
      </picker>
    </l-form-cell>

    <l-form-cell v-if="status != 1 && status != 2" label="行驶证注册时间" :must="must" has-slot :arrow="!disabled" @click="changeDate('vlicenceRegister')">
      <view class="form-item flex-row flex-item align-center justify-end">
        <text class="text-30" :class="['color-t' + (form.vlicenceRegister? 1 : 3)]">{{ form.vlicenceRegister || '请选择日期' }}</text>
      </view>
    </l-form-cell>

    <l-form-cell v-if="status != 1 && status != 2" label="行驶证年检时间" :must="must" has-slot :arrow="!disabled" unlined @click="changeDate('vlicenceDxp')">
      <view class="form-item flex-row flex-item align-center justify-end">
        <text class="text-30" :class="['color-t' + (form.vlicenceDxp? 1 : 3)]">{{ form.vlicenceDxp.slice(0, 7) || '请选择日期' }}</text>
      </view>
    </l-form-cell>
  </view>
</template>

<script>
import { fuelTypeList } from '../../index'
export default {
  name: 'IdentityInfoModel',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    must: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    status: {
      type: [String, Number],
      default: 0
    },
    showType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        brandModel: '',
        useType: '',
        frameNumber: '',
        engineNumber: '',
        fuelType: '',
        vlicenceRegister: '',
        vlicenceDxp: ''
      },
      fuelTypeList,
      fuelTypeValue: '',
      fuelTypeLabel: ''
    }
  },
  watch: {
    data: {
      handler(e) {
        if (!e.vlicenceDxp) {
          e.vlicenceDxp = ''
        }
        Object.assign(this.form, e)
        this.initFuelType()
      },
      deep: true
    },
    form: {
      handler() {
        this.$emit('update', this.form)
      },
      deep: true
    }
  },
  methods: {
    initFuelType() {
      fuelTypeList.forEach((item, index) => {
        if (item.value === this.form.fuelType) {
          this.fuelTypeValue = index
          this.fuelTypeLabel = item.label
        }
      })
    },
    bindFuelTypeIndex(e) {
      const val = this.fuelTypeValue = e.detail.value
      this.form.fuelType = fuelTypeList[val].value
      this.fuelTypeLabel = fuelTypeList[val].label
    },
    // 修改日期
    changeDate(attr) {
      if (this.disabled) return
      this.$emit('changeDate', attr)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
